<template>
  <div class="wechat">
    <el-card shadow="always" style="width: 45%;margin: 0 auto">
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      <el-table
          :data="list"
          style="width: 100%">
        <el-table-column
            prop="nName"
            label="名称"
            width="180">
        </el-table-column>
        <el-table-column
            prop="description"
            label="描述"
            width="180">
        </el-table-column>
        <el-table-column
            prop="nStatus"
            label="性质"
            width="180">
          <template slot-scope="scope">
            {{ scope.row.nStatus | filterStatus }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="120"
        >
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle @click="update(scope.row.id)"></el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deleteById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          :modal-append-to-body="false"
          width="450px"
          :before-close="handleClose">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="名称">
            <el-input v-model="form.nName"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.description"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.nStatus" placeholder="选择状态">
              <el-option label="白" :value="0"></el-option>
              <el-option label="黑" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveOrUpdate">确定</el-button>
            <el-button @click="handleClose">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
name: "WechatManage",
  data(){
    return {
      list: [],
      dialogVisible: false,
      form: {}
    }
  },

  filters: {
    filterStatus(val){
      if (val === 0){
        return "白"
      }else {
        return "黑"
      }
    }
  },

  created() {
    this.getList()
  },

  methods: {
    getList(){
      this.$http.get('http://wechat.jxtz.net/NameList/list').then(res => {
        this.list = res.data.data.list
      }).catch().finally()
    },

    update(id){
      this.dialogVisible = true
      this.$http.get('http://wechat.jxtz.net/NameList/getById/' + id).then(res => {
        this.form = res.data.data.nameList
      }).catch().finally()
    },

    deleteById(id){
      this.$confirm('确认删除吗？').then(() => {
        this.$http.delete('http://wechat.jxtz.net/NameList/delete/' + id).then(res => {
          this.$message.success(res.data.message)
          this.getList()
        }).catch().finally(() => {
        })
      }).catch()
    },

    handleClose(){
      this.form = {}
      this.dialogVisible = false
    },

    saveOrUpdate(){
      var form = this.form;
      if (form.id === undefined || form.id === null ){
        var names = form.nName
        var flag = false
        var list = this.list;
        for (let i = 0; i < list.length; i++) {
          var listElement = list[i];
          var nName = listElement.nName;
          if (nName === names){
            flag = true
          }
        }
        if (flag){
          this.$confirm('存在重复名称，确认添加吗？').then(() => {
            this.$http.post('http://wechat.jxtz.net/NameList/add', form).then(res => {
              this.$message.success(res.data.message)
              this.handleClose()
              this.getList()
            }).catch().finally()
          })
        }else {
          this.$http.post('http://wechat.jxtz.net/NameList/add', form).then(res => {
            this.$message.success(res.data.message)
            this.handleClose()
            this.getList()
          }).catch().finally()
        }
      }else{
        this.$http.post('http://wechat.jxtz.net/NameList/update', form).then(res => {
          this.$message.success(res.data.message)
          this.handleClose()
          this.getList()
        }).catch().finally()
      }
    }
  }
}
</script>

<style scoped>
.wechat{


}
</style>